<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        #box3{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        #box4{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #boxs4{
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        #box5{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #boxs5{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <button id="btn1">单击触发</button>
    <button id="btn2">双击触发</button>
    <button id="btn3">按下时触发</button>
    <button id="btn4">松开鼠标时触发</button>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4">
        <div id="boxs4"></div>
    </div>
    <div id="box5">
        <div id="boxs5"></div>
    </div>
</body>
</html>

<script>
    //鼠标事件
    // 鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些
    //click:鼠标按下时触发
    //dblclick:在同一个元素双击鼠标时触发
    //mousedown:鼠标键按下时触发
    //mouseup:释放按下的鼠标键时触发
    //mousemove:当鼠标在节点内部移动时触发，当鼠标持续移动时，该事件会连续触发
    //mouseenter:鼠标进入一个节点触发，进入子节点不会触发这个事件
    //mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
    //mouseover:鼠标进入一个节点时触发。进入子节点会再一次触发这个事件
    //mouseout:鼠标离开一个节点时触发，离开父节点也会触发这个事件
    //wheel:滚动鼠标的滚轮时触发


    var btn1 = document.getElementById('btn1')
    btn1.onclick = function(){
        console.log('单击触发')
    }

    var btn2 = document.getElementById('btn2')
    btn2.ondblclick = function(){
        console.log('双击触发')
    }

    var btn3 = document.getElementById('btn3')
    btn3.onmousedown = function(){
        console.log('按下时触发')
    }

    var btn4 = document.getElementById('btn4')
    btn4.onmouseup = function(){
        console.log('松开鼠标时触发')
    }

    var box1 = document.getElementById('box1')
    box1.onmousemove = function(){
        console.log('鼠标移动时触发')
    }

    var box2 = document.getElementById('box2')
    box2.onmouseenter = function(){
        console.log('鼠标进入时触发')
    }

    var box3 = document.getElementById('box3')
    box3.onmouseleave = function(){
        console.log('鼠标离开时触发')
    }
    
    var box4 = document.getElementById('box4')
    box4.onmouseover = function(){
        console.log('鼠标进入时触发')
    }

    var box5 = document.getElementById('box5')
    box5.onmouseout = function(){
        console.log('鼠标离开时触发')
    }

    onwheel = function(){
        console.log('滚动鼠标的滚轮时触发')
    }
</script>